{% extends "memory_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "我的收藏" %}</title>
    {{ block.super }}
    <style>
    *{
        font-family: "Microsoft YaHei", Arial, "Segoe UI", sans-serif;
    }
    .show-all-memory{
        margin-top: 100px;
    }
    .memory-card{
        background-color: #f0f0f0;
        border-radius: 10px;
        padding: 10px;
        color: black;

        background-image: url("{{ STATIC_URL }}memoryImage/background/bg5.png");
        background-repeat:no-repeat;
    }
    .memory-content-area{
        overflow: hidden;
    }
    .memory-content{
        display: none;
        overflow-y: scroll;
    }
    .memory-content::-webkit-scrollbar {
            display: none;
    }

    </style>
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
{% endblock %}




{% block content %}
    <div class="container">
        <div class="col-md-2" style="margin-left: -30px; margin-top: 40px;">
            <div class="king-vertical-nav4" style="width:200px;" id="king-vertical-nav4">
                <div class="sidebar-inner">
                    <ul class="navi">
                        <li>
                            <a onclick="jumpToPersonalCenter()">
                                <i class="glyphicon glyphicon-user"></i>我的信息
                            </a>
                        </li>

                    </ul>
                    <ul class="navi">
                        <li>
                            <a onclick="jumpToMyCollect()">
                                <i class="glyphicon glyphicon-heart"></i>我的收藏
                            </a>
                        </li>
                    </ul>
                    <ul class="navi">
                        <li>
                            <a>
                                <i class="glyphicon glyphicon-eye-open"></i>我的关注
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row show-all-memory">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                {% for memory in memories %}
                    <div class="row memory-card">
                            <div class="col-md-1">
                                <div class="user-img">
                                    <img id="user_pic" src="{{ STATIC_URL }}{% if memory.belonging_user.pic %}{{memory.belonging_user.pic}}{% else %}memoryImage/userImage/default.jpg{% endif %}" class="img-fluid img-circle" style="width:50px;height: 50px">
{#                                    <img src="{{ STATIC_URL }}file/2cacad94-e2f6-48d9-8d08-9356267c7736.jpg" class="img-fluid img-circle" style="width:50px;height: 50px">#}
                                </div>
{#                                <img src="{{ STATIC_URL }}image/{{memory.belonging_user.pic}}" class="img-circle">#}
                            </div>
                            <div class="col-md-11">
                                <div class="row memory-top">
                                    <p class="col-md-2">来自 {{ memory.belonging_user.username }}</p>
                                    <p class="col-md-7">{{ memory.create_time }}</p>
                                    <div class="col-md-3 function-area function-area-{{ memory.id }}"  onclick="getCountInfo({{ memory.id }})">
                                        <span id="collect" class="collect-{{ memory.id }} glyphicon glyphicon-heart-empty" onclick="collect({{ memory.id }})"></span>
                                    </div>
                                </div>
                                <div class="row memory-content-area"  onclick="toggleMemoryContent({{ memory.id }})">
                                    <h3 style="margin-left: 270px">{{ memory.memory_title }}</h3>
                                    <div id="memory-id-{{ memory.id }}" class="memory-content">{{ memory.memory_content|safe }}</div>
                                </div>
                            </div>
                    </div>
                    <hr>
                {% endfor %}
            </div>
        </div>
        <div class="row">
            <nav aria-label="Page navigation" align="center" >
              <ul class="pagination pagination-lg">
                  {% if memories.has_previous %}
                    <li>
                      <a href="{{ SITE_URL }}memory_storage/person/my_collect?user_id={{ user_id }}&page={{ memories.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                  {% endif %}
                  {% for num in page_range %}
                        <li {% ifequal num page %}class="active"{% endifequal %}>
                            <a href="{{ SITE_URL }}memory_storage/person/my_collect?user_id={{ user_id }}&page={{ num }}{% if keyword %}&keyword={{ keyword }}{% endif %}">{{num}}</a></li>
                  {% endfor %}
                  {% if memories.has_next %}
                    <li>
                      <a href="{{ SITE_URL }}memory_storage/person/my_collect?user_id={{ user_id }}&page={{ memories.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  {% endif %}
              </ul>
            </nav>
        </div>
        </div>
    </div>
{% endblock %}

{% block extra_block %}
<script>
    function toggleMemoryContent(memory_id){
        element = '#memory-id-'+memory_id;
        //console.log(element);
        $(element).slideToggle(600);
    }

        function collect(memory_id){
        $.ajax({
            url:'{{ SITE_URL }}memory_storage/collect/',
            type:'post',
            data:{
                "memory_id":memory_id,
                "author": GetQueryString('user_id'),
                'csrfmiddlewaretoken':'{{ csrf_token }}'
            },
            success: function (response){

                if(response["result"]){
                    new bkMessage({
                        message: response["message"],
                        theme: 'success',
                    });
                    getCountInfo(memory_id)
                }else {
                    new bkMessage({
                        message: response["message"],
                        theme: 'error',
                        delay: 3000
                    });
                }
            }
        })
    }

    function getCountInfo(memory_id) {
        $.ajax({
            url:'{{ SITE_URL }}memory_storage/get_count_info/',
            type:'post',
            data:{
                "memory_id":memory_id,
                'csrfmiddlewaretoken':'{{ csrf_token }}'
            },
            success: function (response){

                if(response["result"]){
                    //console.log(response['data']);

                    let data = response['data'];
                    var element = $(".like-" + memory_id);
                    element.empty();
                    element.append('('+ data['count_liked'] + ')');

                    element = $(".dislike-" + memory_id);
                    element.empty();
                    element.append('('+ data['count_disliked'] + ')');

                    element = $(".collect-" + memory_id);
                    element.empty();
                    element.append('('+ data['count_collected'] + ')');
                }else {
                    new bkMessage({
                        message: response["message"],
                        theme: 'error',
                        delay: 3000
                    });
                }
            }
        })
    }

    $(function () {
        $(".function-area").trigger('click')
    })

</script>
{% endblock %}

{% block footer %}{% endblock %}

